<template>
    <div class="body">
        <div class="gd_hd_box">
            <div class="gd_hd_wrap">
                <h1 @click="turnBlank(0, {})">
                    <img
                        src="~/assets/img/hg/hg_logo.png"
                        alt=""
                    />
                </h1>

                <div class="gd_he_rig_box">
                    <dl>
                        <dt>
                            <span>科技管理信息网</span>
                        </dt>
                        <dd><i></i></dd>
                        <dd><span>2021年02月18日</span></dd>
                        <dd><i></i></dd>
                        <dd><span>北京 晴转多云 19°C～21°C</span></dd>
                    </dl>

                    <div class="gd_he_searchedit">
                        <el-input
                            v-model="input"
                            placeholder="请输入搜索内容"
                            class="gd_de_input"
                        ></el-input>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            class="gd_de_button"
                        ></el-button>
                    </div>
                </div>
            </div>

            <div class="gd_hd_navbox">
                <ul>
                    <li
                        :class="{ gd_hd_active: icur === index }"
                        v-for="(item, index) in navList"
                        :key="index"
                        @click="turnNavclick(index)"
                    >
                        {{ item }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="gd_nav_tag">
            <div>
                当前位置：<i @click="turnBlank(0, {})">首页</i>
                <a
                    v-for="(item, index) in statenavList"
                    :key="index"
                    @click="turnBlank(1, { categoryId: item.icur })"
                >
                    <img
                        src="~/assets/img/hg/gd_icon_arrow.png"
                        alt=""
                    />
                    <span>{{ item.title }}</span>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import navList from './navList.json';
import appUtil from '~/assets/utils/appUtil';
export default {
    name: 'test',
    data() {
        return {
            icur: 0,
            navList: navList.navList,
            input: '',
            statenavList: [],
        };
    },
    mounted() {
        if (localStorage.urlInfo) {
            this.statenavList = JSON.parse(localStorage.urlInfo);
        }
    },
    methods: {
        turnNavclick(icur) {
            this.icur = icur;
            if (icur === 0) {
                this.turnBlank(0, {});
            }
        },
        turnBlank(type, Parameters) {
            appUtil.routerUrl(
                type,
                Parameters,
                this.statenavList[0].title,
                this.statenavList[0].icur
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.body {
    overflow: hidden;
}

.gd_nav_tag {
    height: 30px;
    background: #ecf3fa;

    div {
        font-size: 10px;
        font-weight: 400;
        color: #888888;
        line-height: 30px;
        width: 1150px;
        margin: 0 auto;

        i {
            font-style: normal;
            cursor: pointer;
        }

        img {
            margin: 0 4px;
        }

        span {
            color: rgba(36, 110, 217, 1);
            cursor: pointer;
        }
    }
}

.gd_hd_box {
    height: 184px;
    background: url('~/assets/img/hg/gd_nav_edit.png') center
        center no-repeat;
    background-size: cover;

    .gd_hd_wrap {
        width: 1200px;
        margin: 0 auto;
    }

    .gd_hd_wrap {
        padding-top: 8px;
        overflow: hidden;

        h1 {
            float: left;
            padding-top: 15px;
            cursor: pointer;
        }

        .gd_he_rig_box {
            float: right;

            dl {
                float: right;
                padding-top: 13px;

                dd {
                    float: left;

                    i {
                        width: 1px;
                        background: #c5ddff;
                        height: 12px;
                        margin: 0 5px;
                        display: inline-block;
                    }

                    span {
                        font-size: 10px;
                        color: #c5ddff;
                    }
                }

                dt {
                    float: left;

                    span {
                        font-size: 10px;
                        font-weight: 400;
                        color: #12d1ff;
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .gd_hd_navbox {
        height: 50px;
        background: rgba(255, 255, 255, 0.1);
        margin-top: 39px;

        ul {
            text-align: center;
            width: 1200px;
            margin: 0 auto 0;
            .gd_hd_active {
                border-color: #e3eeff;
                font-size: 16px;
                font-weight: bold;
            }
            li {
                display: inline-block;
                border-bottom: 2px solid transparent;
                font-size: 14px;
                font-weight: 500;
                color: #dfecff;
                padding: 12px 5px 0;
                margin: 0 30px;
                line-height: 28px;
                cursor: pointer;
            }
        }
    }

    .gd_he_searchedit {
        width: 309px;
        margin: 58px 0 0 0;
        height: 30px;
        background: #ffffff;
        border-radius: 4px;

        body .gd_he_searchedit .el-input__inner {
            height: 30px;
            line-height: 30px;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            font-size: 14px;
            font-weight: 400;
            background: #d6e4ff;
            color: #b4b4b4;
        }
         .el-input__inner::placeholder {
            color: rgba(29, 64, 140, 1);
        }
         .el-button {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            font-size: 14px;
            font-weight: 400;
            color: rgba(29, 64, 140, 1);
            height: 30px;
            background: #d6e4ff;
            font-weight: bold;
            border: 0;
        }
         .el-icon-search {
            font-weight: bold;
        }
         .el-input__inner:focus {
            border-color: transparent;
        }

        .gd_de_input {
            width: 270px;
            float: left;
            height: 30px;
            border: 0;

            .el-input__inner {
                height: 30px;
            }
        }

        .gd_de_button {
            width: 39px;
            height: 30px;
            float: right;
            border: 0;
        }
    }
}
</style>
